<template>
  <view class="yinyue" @click="togglePlayPause">
    <image :src="currentImageUrl" class="music-image" :class="{ animating: isAnimating }"></image>
    <image :src="imageUrl + '/yinyue/Vector.png'" class="music-image-2"></image>
  </view>
</template>

<script>
import { playBackgroundMusic, pauseBackgroundMusic } from './audio.js';

export default {
  data() {
    return {
      imageUrl: this.$imageUrl,
      isPlaying: true,
      currentImageUrl: 'https://xnlv-test.lizxx.com/image/xnlv/static/yinyue/Group-14892.png',
      isAnimating: true,
    };
  },
  methods: {
    togglePlayPause() {
      if (this.isPlaying) {
        pauseBackgroundMusic();
        this.currentImageUrl = 'https://xnlv-test.lizxx.com/image/xnlv/static/yinyue/Group-14902.png';
        this.isAnimating = false;
      } else {
        playBackgroundMusic();
        this.currentImageUrl = 'https://xnlv-test.lizxx.com/image/xnlv/static/yinyue/Group-14892.png';
        this.isAnimating = true;
      }
      this.isPlaying =!this.isPlaying;
    },
  },
};
</script>

<style scoped>
/* 定义容器样式 */
.yinyue {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 5;
  width: auto;
  height: auto;
  right: 0;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 12vh;
  margin-right: 40rpx;
}

/* 音乐图片样式 */
.music-image {
  z-index: 3;
  width: 64rpx;
  height: 64rpx;
}
.music-image.animating {
  animation: rotateAnimation 2s linear infinite;
}
.music-image-2 {
  position: absolute;
  z-index: 4;
  width: 15.33rpx;
  height: 18.78rpx;
  margin-bottom: 24rpx;
  margin-right: 26rpx;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>